<template>
	<view>
		<nav-public :title="'支付成功'" :background="'#fff'" :color="'black'"></nav-public>
		<view class="top">
			<view class="done" @click="$navTo('/pages/index/order')">完成</view>
			<view class="d_pay">
				<image src="/static/user/dui.png" mode="widthFix"></image>
				<view>购买成功</view>
			</view>
			<view class="btn_list">
				<button @click="$navTo('/pages/product/groupbuy?id='+info.orderGoods[0].goodsid)">再来一单</button>
				<button @click="share()">喊朋友买</button>
			</view>
		</view>
		<view class="info">
			<view class="i_top">
				<view class="clamp">{{info.orderGoods[0].goodstitle}}</view>
				<view class="tit" @click="$navTo('/pages/order/detailsw?id='+orderid)">查看订单 ></view>
			</view>
			<image :src="info.img" mode="widthFix"></image>
			<view class="info_tips">出示券码，收银员需确认核销</view>
			<image src="https://img.jinghushi.com/images/9/2024/07/ODoLD6lLXH76M3hLQgQm7SmlGMddcs.png" class="hexiaoliucheng" mode="widthFix"></image>
		</view>
		<view class="sharebg" v-if="shareimg!=''" @tap="shareimg = ''">
			<!-- #ifdef APP-PLUS||MP-WEIXIN -->
			<image @longpress.stop="toSave" :src="shareimg" mode="widthFix"></image>
			<!-- #endif -->
		</view>
		<uni-popup ref="bind" type="dialog" :is-mask-click="false">
			<view class="nobind">
				<view>获取更多折扣，请完善联系方式</view>
				<button class="l_w_login" open-type="getPhoneNumber" @getphonenumber="getUserProfile">一键绑定手机号</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid: '',
				info: [],
				shareimg: '',
			};
		},
		onLoad(options){
			this.orderid = options.id;
			this.getInfo();
			this.getBindPhone();
		},
		methods: {
			// 是否绑定手机号
			getBindPhone(){
				this.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						if(res.data.data.member.mobile==''||res.data.data.member.mobile.length<1||res.data.data.member.mobile===null||res.data.data.member.mobile==undefined){
							this.$refs.bind.open();
						}
					}
				})
			},
			getUserProfile(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						that.$axios('bindmobile/bmobile', "POST", 'member', obj).then(res => {
							if (res.data.code == 200) {
								that.$refs.bind.close();
							}
						})
					},
					fail() {
						that.$api.msg('绑定失败，请重试！')
					}
				})
			},
			getInfo(){
				this.$axios('detail/getOrderInfo','POST','order',{
					id: this.orderid
				}).then(res=>{
					if(res.data.code==200){
						this.info = res.data.data;
					}
				})
			},
			share: function() {
				var that = this;
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.$axios('detail/create_goods_poster', "POST", 'shop', {
					goodsid: this.info.orderGoods[0].goodsid
				}).then(res => {
					if (res.data.code == 200) {
						that.shareimg = res.data.data.url
					}
					uni.hideLoading();
				}, (error) => {
			
				})
			},
			// 长按保存图片
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareimg,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 80rpx;
	}
.top{
	background: #f4f4f4;
	padding: 20rpx 20rpx;
	.done{
		text-align: right;
	}
	.d_pay{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
	}
	.btn_list{
		display: flex;
		justify-content: center;
		button{
			background: #f4f4f4;
			margin: 24rpx 10rpx;
			font-size: 26rpx;
			width: 188rpx;
			&::after{
				border-color: #d4d4d4;
			}
		}
	}
}
.info{
	text-align: center;
	padding: 0 20rpx;
	.i_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx dashed #e1e1e1;
		.clamp{
			width: 76%;
		}
	}
	.tit{
		line-height: 3.5;
		font-size: 24rpx;
	}
	image{
		width: 50%;
		margin-top: 60rpx;
	}
	.info_tips{
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	.hexiaoliucheng{
		width: 100%;
		margin-top: 40rpx;
	}
}
.sharebg {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		image {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 999;
			transform: translate(-50%, -50%);
		}
	}
</style>
